@volvo-cars/ui-design-tokens
Advanced tools
_Questions? Ask in [Slack #design-system-web](https://vcc-consumer-digital.slack.com/archives/C041K092P4P)_
Questions? Ask in Slack #design-system-web
Design tokens capture the low-level design properties like colors, grid, spacing and typography. These tokens provide a single source of truth and feed into the different UI components.
Tokens in this repository should be in sync with the design libraries in Figma.
If you are using VCC UI, design tokens will be made available through built-in features in an upcoming release.
If you want to use the tokens directly outside of VCC UI:
Install the design tokens package by running
yarn add @volvo-cars/ui-design-tokens
The following CSS files are available from the package:
@font-face rules for Volvo Broad@font-face rules for Volvo NovumInclude the CSS files in your page, and add the versioned root class name, e.g. <html class="volvo_0_1"> (available as classNames.root).
To switch a section of the page to the dark color scheme, use the scheme-dark (classNames.schemeDark) class name and the scheme-light (classNames.schemeLight) class name to switch back.
Class names and tokens are available as JavaScript exports with TypeScript types for usage with CSS-in-JS or inline styles. The tokens refer to the CSS variables in the static CSS files, and will update dynamically based on the wrapping color scheme class name.
import { classNames, tokens } from '@volvo-cars/ui-design-tokens';
<div
className={classNames.schemeLight}
style={{
background: tokens.colorBackgroundPrimary,
color: tokens.colorPrimary,
paddingBlock: tokens.size,
}}
/>;
Import the CSS in your project with the following imports
import '@volvo-cars/ui-design-tokens/css/tokens.css';
import '@volvo-cars/ui-design-tokens/css/volvo-broad.css';
import '@volvo-cars/ui-design-tokens/css/volvo-novum.css';
Add the appropriate class names
import { classNames } from '@volvo-cars/ui-design-tokens';
export default class MyDocument extends Document {
render() {
return <Html className={classNames.root}></Html>;
}
}
Legacy tokens are still available in 2.x in the following output structure
- build/
- web
- volvo
- tokens.css
- tokens.json
- tokens.scss
- volvo-dark
- android
- volvo
- volvo-dark
- ios
- volvo
- volvo-dark
To build the design tokens locally run yarn build
FAQs
_Questions? Ask in [Slack #design-system-web](https://vcc-consumer-digital.slack.com/archives/C041K092P4P)_
We found that @volvo-cars/ui-design-tokens demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 8 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Node.js will be enforcing stricter semver-major PR policies a month before major releases to enhance stability and ensure reliable release candidates.
Security News
Research
Socket's threat research team has detected five malicious npm packages targeting Roblox developers, deploying malware to steal credentials and personal data.
Security News
vlt introduced its new package manager and a serverless registry this week, innovating in a space where npm has stagnated.